<template>
    <baidu-map class="map" :style="{width: width,height: height}" :center="{lng: 110.320320, lat: 21.284248}" :zoom="9">
        <!--  比例尺  -->
        <bm-scale anchor="BMAP_ANCHOR_TOP_RIGHT"/>
        <!--  缩放  -->
        <bm-navigation anchor="BMAP_ANCHOR_TOP_RIGHT"/>
        <!--  定位  -->
        <bm-geolocation anchor="BMAP_ANCHOR_BOTTOM_RIGHT" :showAddressBar="true" :autoLocation="true"/>

        <div v-for="(item, index) in this.positionList" :key="index">
            <bm-marker :dragging="true"
                       :position="{lng: item.gpsLongitude, lat: item.gpsLatitude}"
                       @click="infoWindowOpen(index)"
            >
                <bm-info-window :show="item.show" @close="infoWindowClose(index)">
                    <div>
                        <el-descriptions title="详情" direction="vertical" :column="2" border>
                            <el-descriptions-item label="网关名称" :label-style="{'min-width': '120px'}">
                                {{ item.gatewayName }}
                            </el-descriptions-item>
                            <el-descriptions-item label="网关编号">{{ item.gatewayNumber }}</el-descriptions-item>
                            <el-descriptions-item label="所属项目">{{ item.projectName }}</el-descriptions-item>
                            <el-descriptions-item label="是否在线">
                                <div v-if="item.serverOnline === '1'">
                                    <el-tag type="success">在线</el-tag>
                                </div>
                                <div v-if="item.serverOnline === '0'">
                                    <el-tag type="danger">离线</el-tag>
                                </div>
                            </el-descriptions-item>
                        </el-descriptions>
                    </div>
                </bm-info-window>
            </bm-marker>
        </div>
    </baidu-map>

</template>

<script>
import { selectMapGateway } from '@/api/system/projectMap'

export default {
    name: 'Map',
    data() {
        return {
            positionList: []
        }
    },
    props: {
        width: {
            type: String,
            default: '100%'
        },
        height: {
            type: String,
            default: '600px'
        }
    },
    mounted() {
        this.getMapGateway()
    },
    methods: {
        infoWindowClose(index) {
            this.positionList[index].show = false
        },
        infoWindowOpen(index) {
            this.positionList[index].show = true
        },
        getMapGateway() {
            this.positionList = []
            selectMapGateway().then(response => {
                // console.log(response.data)
                for (let item of response.data) {
                    let temp = {}
                    temp['gatewayName'] = item.gatewayName
                    temp['gatewayNumber'] = item.gatewayNumber
                    temp['serverOnline'] = item.serverOnline
                    temp['projectName'] = item.projectName
                    temp['gpsLatitude'] = item.gpsLatitude
                    temp['gpsLongitude'] = item.gpsLongitude
                    temp['show'] = false
                    this.positionList.push(temp)
                }
            })
        }
    }
}
</script>

<style scoped>
</style>
